<template>
  <div>
    <div>
      <div class="pictureList">
        <swiper class="swiper"
                :indicator-dots="true"
                :autoplay="true"
                :interval="2000"
                :duration="500">
          <swiper-item v-for="(item,index) of allPicList" :key="index">
            <div class="swiper_img_wrapper">
              <img class="swiper_img" :src="item" mode="aspectFill"/>
            </div>
          </swiper-item>
        </swiper>

      </div>
    </div>
    <div class="head_title">
      {{title}}
    </div>
    <div class="price">
      <div class="price_num">{{amount}}万</div>
<!--      <div class="price_btn" @click="gotoRongzifuwu">我要融资</div>-->
    </div>
    <div class="detail">
      <div class="detail_item_long" v-if="showProdName"><!--电站名称较长需单独一行-->
        <span class="detail_item_label">电站名称</span>
        <span class="detail_item_content_long">{{ dianZhanMingCheng }}</span>
      </div>
      <div class="detail_item_long" >
        <span class="detail_item_label">所属区域</span>
        <span class="detail_item_content_long">{{ area }}</span>
      </div>
      <div class="detail_item" v-for="(item,index) of detailList" :key="index">
        <span class="detail_item_label">{{ item.label }}</span>
        <span class="detail_item_content">{{ item.content }}</span>
      </div>
<!--      <div class="detail_login">-->
<!--        登录以查看电站名称-->
<!--        <uni-icons type="right" size="15"></uni-icons>-->
<!--      </div>-->
<!--      <div class="detail_consult">-->
<!--        技改咨询-->
<!--        <uni-icons type="right" size="15"></uni-icons>-->
<!--      </div>-->
    </div>
    <div class="block" v-if="custphone"><!--如果有客户电话则展示打电话框-->
      <div class="manager">
        <img class="manager_photo" :src="photo"/><!--src="../../static/img/mine/touxiang.png"-->
        <div class="manager_detail">
          <div class="manager_name">{{custname}}</div>
          <div class="manager_edit">详情电询客户</div><!--了解详细信息联系业务员-->
          <!-- <div class="manager_edit">产品详细信息和费用信息了解透彻</div>-->
        </div>
        <div class="manager_call" @tap="phoneCall">拨打电话</div>
      </div>
    </div>
    <div class="block">
      <!--      <div class="title">视频</div>-->
      <!--      <img class="media_video" src="../../static/img/stationDetail/video.png"/>-->

      <div class="title">机房及设备</div>
      <img class="media_picture" mode="aspectFill"
           v-for="(item,index) of jiFangPicList"
           :class="index%2===0?'media_picture':'media_picture-right'"
           :key="index"
           :src="item"/>

      <div class="title">前池</div>
      <img class="media_picture" mode="aspectFill"
           v-for="(item,index) of qianChiPicList"
           :class="index%2===0?'media_picture':'media_picture-right'"
           :key="index"
           :src="item"/>

      <div class="title">取水口及库区</div>
      <img class="media_picture" mode="aspectFill"
           v-for="(item,index) of jiShuiKouPicList"
           :class="index%2===0?'media_picture':'media_picture-right'"
           :key="index"
           :src="item"/>

      <div class="title">其他</div>
      <img class="media_picture" mode="aspectFill"
           v-for="(item,index) of otherPicList"
           :class="index%2===0?'media_picture':'media_picture-right'"
           :key="index"
           :src="item"/>
    </div>
    <div class="block">
      <div class="title">电站描述</div>
      <div class="content">
        {{gk}}
      </div>
    </div>
<!--    <div class="block">-->
<!--      <div class="title">卖方需求</div>-->
<!--      <div class="content">-->
<!--        {{yzyq}}-->
<!--      </div>-->
<!--    </div>-->

    <div class="block">
      <div class="title">其他电站信息</div>
      <div class="detail_item" v-for="(item,index) of otherDetailList" :key="index">
        <span class="detail_item_label_long">{{ item.label }}</span>
        <span class="detail_item_content">{{ item.content }}</span>
      </div>
    </div>
<!--    <div class="block" v-if="phone">&lt;!&ndash;如果有业务员电话则展示打电话框&ndash;&gt;-->
<!--      <div class="manager">-->
<!--        <img class="manager_photo" src="../../static/img/mine/touxiang.png"/>-->
<!--        <div class="manager_detail">-->
<!--          <div class="manager_name">{{name}}</div>-->
<!--          <div class="manager_edit">产品详细信息和费用信息了解透彻</div>-->
<!--        </div>-->
<!--        <div class="manager_call" @click="phoneCall">打电话</div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
  import wxPromisify from "@/libs/wxPromisify";

  export default {
    name: "index",
    data() {
      return {
        title:'',
        amount:'',
        gk:'',
        yzyq: '',
        detailList: [],
        otherDetailList: [],
        jiFangPicList: [],
        qianChiPicList: [],
        jiShuiKouPicList: [],
        otherPicList: [],
        photo:'',//业务员头像
        // name:'',//业务员姓名
        // phone:'',//业务员电话
        custname:'',//客户姓名
        custphone:'',//客户电话
        id:'',//电站id
        status:'',//电站审核状态
        source:'share',//来源
        dianZhanMingCheng:'',//电站名称
        showProdName:'',//是否展示电站名称
        area:'',//所属区域
      }
    },
    computed: {
      allPicList() {
        let list = [
          ...this.jiFangPicList,
          ...this.qianChiPicList,
          ...this.jiShuiKouPicList,
          //...this.otherPicList
        ]

        console.log('allPicList', list);
        return list;
      }
    },
    methods: {
      gotoRongzifuwu() {
        wxPromisify.navigateTo({
          url: '/pages/financingServices/index'
        })
      },
      convertList(str) {
        return str ? str.split(',') : []
      },
      phoneCall() {
        wx.makePhoneCall({//给客户打电话
          phoneNumber: this.custphone,
          success: function (res) {
            console.log('dadianhua:', res.data);
          }
        })
      },
      setAllData(res){
        console.log('res====', res);
        let data = res.data;
        this.title=data.title;//标题
        this.amount=data.amount;//电站售价
        this.gk=data.gk;//电站概况
        //this.yzyq=data.yzyq;//业主要求 卖方需求
        this.dianZhanMingCheng=data.prodname;//电站名称
        this.showProdName='Y';//Y展示电站名称
        this.area=data.area;//所属区域 //'湖南省-株洲市'
        this.detailList = [
          // {
          //   label: '电站名称',
          //   content: data.prodname//'***********'
          // },
          {
            label: '转让方式',
            content: data.zrfs//'全部转让/股份转让'
          },
          // {
          //   label: '',//空，占位
          //   content: ''
          // },
          // {
          //   label: '电站性质',
          //   content: data.xz//'国有'
          // },
          // {
          //   label: '所属区域',
          //   content: data.area//data.province+'-'+data.city//'湖南省-株洲市'
          // },
          {
            label: '投产年份',
            content: data.create_date.substring(0, 4) + '年'//'2005年'
          },
          // {
          //   label: '',//空，占位
          //   content: ''
          // },
          // {
          //   label: '电站类型',
          //   content: data.dzlx//'水电站'
          // },
          {
            label: '装机容量',
            content: data.rl + 'KW'//'2000KW'
          },
          {
            label: '机组数量',
            content: data.sl + '组'//'3组'
          },
          {
            label: '集雨面积',
            content: data.jymj + '平方公里'//'200.0平方公里'
          },
          {
            label: '水头',
            content: data.st+'米'//'200米'
          },
          {
            label: '引水渠长度',
            content: data.ysqcd+'米'//'1000米'
          },
          {
            label: '引水渠类型',
            content: data.ysqlx//'明渠、暗渠'
          },
          {
            label: '压力管长',
            content: data.ylgc+'米'//'1000米'
          },
          {
            label: '压力管直径',
            content: data.ylgzj+'米'//'1米'
          },
          {
            label: '并网线路',
            content: data.bwxl+'千米'//
          },
          {
            label: '并网电压',
            content: data.bwdy+'KV'//'3000毫米'
          },
          {
            label: '年发电量',
            content: data.njfd + '万KW H'//万KW H/年
          },
          {
            label: '上网价格',
            content: data.swdj + '元/KW H'
          },
          {
            label: '年均收入',
            content: data.njsr + '万元'
          },
          // {
          //   label: '是否可扩容',
          //   content: data.iskr//'是/否'
          // },
          // {
          //   label: '年降雨量',
          //   content: data.njyl+'毫米'//'3000毫米'
          // },
        ];
        this.otherDetailList = [
          {
            label: '是否在保护区',
            content: data.isreserve
          },
          {
            label: '运营成本',
            content: data.yycb + '万元/年'
          },
          {
            label: '其他补偿费用',
            content: data.qtbcfy + '万元/年'
          },
          {
            label: '营业执照',
            content: data.yyzz? "有" : "无"//有 或者 无
            // content: data.yyzz_url ? "有" : "无"
          },
          {
            label: '取水许可',
            content: data.qsxkz? "有" : "无"
            // content: data.qsxkz_url ? "有" : "无"
          },
          {
            label: '并网调度协议',
            content: data.bwddxy? "有" : "无"
            // content: data.bwddxy_url ? "有" : "无"
          },
          {
            label: '购售电合同',
            content: data.gsdht? "有" : "无"
            // content: data.gsdht_url ? "有" : "无"
          },
          {
            label: '电费收入清单',
            content: data.srqd? "有" : "无"
            // content: data.srqd_url ? "有" : "无"
          },
        ]

        for (let item of this.convertList(data.jfzp_url)) {//机房及设备
          if (item) {
            this.jiFangPicList.push(item);
          }
        }
        for (let item of this.convertList(data.qczp_url)) {//前池
          if (item) {
            this.qianChiPicList.push(item);
          }
        }
        for (let item of this.convertList(data.qskzp_url)) {//取水口及库区
          if (item) {
            this.jiShuiKouPicList.push(item);
          }
        }
        for (let item of this.convertList(data.kqzp_url)) {//库区
          if (item) {
            this.jiShuiKouPicList.push(item);
          }
        }

        let other = [
          ...this.convertList(data.yyzz_url),
          //...this.convertList(data.kqzp_url),
          ...this.convertList(data.qsxkz_url),
          ...this.convertList(data.bwddxy_url),
          ...this.convertList(data.gsdht_url),
          ...this.convertList(data.ysqzp_url),
          ...this.convertList(data.srqd_url),
          //...this.convertList(data.qskzp_url),
        ]

        for (let item of other) {//其他
          if (item) {
            this.otherPicList.push(item);
          }
        }

        console.log(this.otherPicList);

        this.photo=data.photo!=''&&data.photo!=null?data.photo:'../../static/img/mine/touxiang.png';//业务员头像
        // this.name=data.name;//业务员姓名
        // this.phone=data.phone;//业务员电话
        this.custname=data.custname;//客户姓名
        this.custphone=data.custphone;//客户电话
      },
      setDisplayData(data,res1){
        let data1=res1.data[0];
        let displayStar="********";
        this.title=data.title;//标题
        this.amount= data1.amount==="on"?data.amount:displayStar;//电站售价
        this.gk= data1.gk==="on"?data.gk:displayStar;//电站概况
        //this.yzyq= data1.yzyq==="on"?data.yzyq:displayStar;//业主要求 卖方需求
        this.dianZhanMingCheng=data.prodname;//电站名称
        this.area=data.area;//所属区域 //'湖南省-株洲市'
        this.detailList = [
          // {
          //   label: '电站名称',
          //   content: data.prodname//'***********'
          // },
          // {
          //   label: '',//空，占位
          //   content: ''
          // },
          {
            label: '转让方式',
            content: data1.zrfs==="on"?data.zrfs:displayStar//'全部转让/股份转让'
          },
          // {
          //   label: '',//空，占位
          //   content: ''
          // },
          // {
          //   label: '电站性质',
          //   content: data1.xz==="on"?data.xz:displayStar//'国有'
          // },
          // {
          //   label: '所属区域',
          //   content: data.area//不判断是否能公开，默认显示省-市
          //   // content: data1.area==="on"?data.area:displayStar//data.province+'-'+data.city//'湖南省-株洲市'
          // },
          {
            label: '投产年份',
            content: data1.create_date==="on"?data.create_date.substring(0, 4) + '年':displayStar//'2005年'
          },
          {
            label: '装机容量',
            content: data1.rl==="on"?data.rl + 'KW':displayStar//'2000KW'
          },
          {
            label: '机组数量',
            content: data1.sl==="on"?data.sl + '组':displayStar//'3组'
          },
          {
            label: '集雨面积',
            content: data1.jymj==="on"?data.jymj + '平方公里':displayStar//'200.0平方公里'
          },
          // {
          //   label: '',//空，占位
          //   content: ''
          // },
          // {
          //   label: '电站类型',
          //   content: data1.dzlx==="on"?data.dzlx:displayStar//'水电站'
          // },
          // {
          {
            label: '水头',
            content: data1.st==="on"?data.st+'米':displayStar//'200米'
          },
          {
            label: '引水渠长度',
            content: data1.ysqcd==="on"?data.ysqcd+'米':displayStar//'1000米'
          },
          {
            label: '引水渠类型',
            content: data1.ysqlx==="on"?data.ysqlx:displayStar//'明渠、暗渠'
          },
          {
            label: '压力管长',
            content: data1.ylgc==="on"?data.ylgc+'米':displayStar//'1000米'
          },
          {
            label: '压力管直径',
            content: data1.ylgzj==="on"?data.ylgzj+'米':displayStar//'1米'
          },
          {
            label: '并网线路',
            content: data1.bwxl==="on"?data.bwxl+'千米':displayStar//'1米'
          },
          {
            label: '并网电压',
            content: data1.bwdy==="on"?data.bwdy+'KV':displayStar//
          },
          {
            label: '年发电量',
            content: data1.njfd==="on"?data.njfd + '万KW H':displayStar//万KW H/年
          },
          {
            label: '上网价格',
            content: data1.swdj==="on"?data.swdj + '元/KW H':displayStar
          },
          {
            label: '年均收入',
            content: data1.njsr==="on"?data.njsr + '万元':displayStar
          },
          // {
          //   label: '是否可扩容',
          //   content: data1.iskr==="on"?data.iskr:displayStar//'是/否'
          // },
          // {
          //   label: '年降雨量',
          //   content: data1.njyl==="on"?data.njyl+'毫米':displayStar//'3000毫米'
          // },
        ];
        this.otherDetailList = [
          {
            label: '是否在保护区',
            content: data1.isreserve==="on"?data.isreserve:displayStar
          },
          {
            label: '运营成本',
            content: data1.yycb==="on"?data.yycb + '万元/年':displayStar
          },
          {
            label: '其他补偿费用',
            content: data1.qtbcfy==="on"?data.qtbcfy + '万元/年':displayStar
          },
          {
            label: '营业执照',
            content: data.yyzz//有 或者 无
            // content: data.yyzz_url ? "有" : "无"
          },
          {
            label: '取水许可',
            content: data.qsxkz
            // content: data.qsxkz_url ? "有" : "无"
          },
          {
            label: '并网调度协议',
            content: data.bwddxy
            // content: data.bwddxy_url ? "有" : "无"
          },
          {
            label: '购售电合同',
            content: data.gsdht
            // content: data.gsdht_url ? "有" : "无"
          },
          {
            label: '电费收入清单',
            content: data.srqd
            // content: data.srqd_url ? "有" : "无"
          },
        ]

        for (let item of this.convertList(data.jfzp_url)) {//机房及设备
          if (item) {
            this.jiFangPicList.push(item);
          }
        }
        for (let item of this.convertList(data.qczp_url)) {//前池
          if (item) {
            this.qianChiPicList.push(item);
          }
        }
        for (let item of this.convertList(data.qskzp_url)) {//取水口及库区
          if (item) {
            this.jiShuiKouPicList.push(item);
          }
        }

        let other = [
          // ...this.convertList(data.yyzz_url),//营业执照不显示
          ...this.convertList(data.kqzp_url),
          //...this.convertList(data.qsxkz_url),//取水许可证不显示
          //...this.convertList(data.bwddxy_url),//并网调度协议不显示
          //...this.convertList(data.gsdht_url),//购售电合同不显示
          ...this.convertList(data.ysqzp_url),
          //...this.convertList(data.srqd_url),//近三年及以上收入清单不显示
          // ...this.convertList(data.qskzp_url),
        ]

        for (let item of other) {//其他
          if (item) {
            this.otherPicList.push(item);
          }
        }

        //console.log(this.otherPicList);
        this.custname=data.custname;//客户姓名
        this.custphone=data.custphone;//客户电话
        // this.name=data.name;//业务员姓名
        // this.phone=data.phone;//业务员电话
      },
      getMineProdInfo(options) {
        this.$Api.getProdInfo(options)
            .then((res) => {
              this.setAllData(res);
            })
      },
      getDisplayProdInfo(options) {
        this.$Api.getProdInfo(options)
            .then((res) => {
              //console.log('res====', res);
              this.$Api.getDisplay(options)
                  .then((res1)=>{
                    console.log('resdisplay====', res1);
                    let data = res.data;
                    console.log('res1.data:',res1.data);
                    if(res1.data==''){
                      //未设置是否公开，默认全都展示
                      console.log('空');
                      this.setAllData(res);
                    }else{//只显示公开项
                      this.setDisplayData(data,res1);
                    }

                  });


            })
      },
    },
    onLoad(options) {
      console.log('options==',options);
      this.id= options.id;
      this.status=options.status;
      //console.log('this.status==',this.status);
      if(this.status==='已审核'||this.status===''){
        wx.showShareMenu();//显示当前页面的转发按钮
      }else{
        wx.hideShareMenu();//隐藏当前页面的转发按钮
      };

      if(options.source==='mine'|| options.source==='adminMine'){
        this.getMineProdInfo(options);
      }else{
        this.getDisplayProdInfo(options);
      }


    },
    onShareAppMessage: function (res) {
      console.log('res.from:',res.from);
      console.log('this.status:',this.status);
        return {
          title: '电站详情',//自定义转发标题
          path:'/pages/stationDetail/index?id='+this.id+'&status='+this.status+'&source='+this.source,//当前页面的路径 ，必须是以 / 开头的完整路径
          // imageUrl: ''//不设置此字段时，默认截取当前页面作为展示的图片
        }
    }
  }
</script>

<style scoped lang="scss">
  .pictureList {
    width: 750px;
    height: 532px;
  }

  .head_title {
    padding: 40px 28px;
    font-size: 44px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;

  }

  .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 40px;
    margin-right: 40px;
  }

  .price_num {
    font-size: 48px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #D9261D;
  }

  .price_btn {
    width: 158px;
    height: 64px;
    background: #D9261C;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }

  .detail {
    margin-left: 40px;
    margin-top: 36px;
    position: relative;
  }

  .detail_item {
    display: inline-block;
    width: 350px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-bottom: 30px;
    vertical-align:middle;//垂直居中

    .detail_item_label {
      display: inline-block;
      width: 140px;
      color: #999999;
    }

    .detail_item_label_long{
      display: inline-block;
      width: 168px;
      color: #999999;
    }

    .detail_item_content {
      margin-left: 18px;
      color: #333333;
    }
  }

  .detail_item_long {
    display: inline-block;
    width: 700px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-bottom: 30px;

    .detail_item_label {
      display: inline-block;
      width: 140px;
      color: #999999;
    }

    .detail_item_content_long {
      margin-left: 18px;
      color: #333333;
    }
  }

  .detail_login {
    position: absolute;
    top: 0;
    right: 42px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #D9261C;
  }

  .detail_consult {
    position: absolute;
    bottom: 30px;
    right: 42px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #D9261C;
  }

  .title {
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    margin-top: 32px;
    margin-bottom: 20px;
  }

  .block {
    border-top: 24px solid #F5F5F5;
    padding: 0 0 30px 40px;
  }

  .media_video {
    width: 670px;
    height: 338px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
  }

  .media_picture {
    width: 326px;
    height: 200px;
    border-radius: 16px;
  }

  .media_picture-right {
    width: 326px;
    height: 200px;
    margin-left: 18px;
  }

  .content {
    margin-right: 40px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 48px;
  }

  .manager {
    margin-top: 22px;
    position: relative;

    .manager_photo {
      width: 120px;
      height: 120px;
      vertical-align: top;
      border-radius: 50%;
    }

    .manager_detail {
      display: inline-block;
      margin-left: 48px;


      .manager_name {
        font-size: 40px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      .manager_edit {
        margin-top: 26px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }

    .manager_call {
      width: 132px;
      height: 64px;
      background: #D9261C;
      border-radius: 8px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 28px;
      right: 36px;
    }
  }

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper_img_wrapper {
    //width: 750px;
    //height: 532px;
  }

  .swiper_img {
    width: 750px;
    height: 532px;
    background-size: revert;
  }
</style>